
import $Element from "@/core/Element";
import EventManage from "@/core/EventWithDelegateMgr";
export default class Scale extends $Element{
    private container:$Element;
    private buttonText:$Element;
    private menuDialog:$Element;
    private menuDialogViewSizeDoms:$Element[] = [];
    private changePlaygroundFunction!:(width:number,height:number)=>void;
    // private eventMgr:EventManage;
    private scaleStrategys:{[key:string]:string[]} = {
        "4:3":["1152×864","1280×1024","1280×960","1600×1200"],
        "16:9":["1366×768","1280×720","1600×900","","1920×1080","2560×1440","3840×2160"],
        "16:10":["1280×800","1366×768","1440×900","1680×1050","1920×1200","2560×1600"],
        "5:4":["1280×1024"]
    };
    constructor(container:$Element){
        super("<div/>");
        this.container = container;

        this.buttonText = new $Element("<span/>");
        (<HTMLElement>this.buttonText.current).innerHTML="切换比例(16:9)";
        this.appendChild(this.buttonText)
        // (<HTMLElement>this.dialogCloseButton.current).style.display="none";
        this.menuDialog = new $Element("<div/>");
        this.menuDialog.addClassName("scale-tool-menu");
        (<HTMLElement>this.menuDialog.current).style.display = "none";
        this.container.appendChild(this.menuDialog);
        this.container.appendChild(this);
        // (<HTMLElement>this.current).innerText = "切换比例(16:9)";
        this.initScaleElement();
        const self = this;
        for(let key in this.scaleStrategys){
            const newViewSizeElement = new $Element("<div/>");
            newViewSizeElement.addClassName("scale-tool-menu-item");
            this.menuDialogViewSizeDoms.push(newViewSizeElement);
            const titleElement = new $Element("<div/>");
            (<HTMLElement>titleElement.current).innerHTML = key;
            titleElement.addClassName("title")
            newViewSizeElement.appendChild(titleElement);
            this.scaleStrategys[key].forEach(viewSize=>{
                const subTitleElement = new $Element("<div/>");
                (<HTMLElement>subTitleElement.current).innerHTML = viewSize;
                subTitleElement.addClassName("sub-menu");
                subTitleElement.addEventListener("click",function(this:HTMLElement){
                    (<HTMLElement>self.buttonText.current).innerHTML="切换比例("+key+")";
                    self.changePlaygroundFunction && self.changePlaygroundFunction(parseInt(this.innerHTML.split("×")[0]),parseInt(this.innerHTML.split("×")[1]));
                    (<HTMLElement>self.menuDialog.current).style.display = "none";
                });
                newViewSizeElement.appendChild(subTitleElement);
            });
            this.menuDialog.appendChild(newViewSizeElement);
        }
    }
    changePlaygroundSize(fn:(width:number,height:number)=>void){
        this.changePlaygroundFunction = fn;
    }
    private initScaleElement(){
        const self = this;
        this.addEventListener("click",function(evt:Event){
            (<HTMLElement>self.menuDialog.current).style.display = "flex";
        });
    }
}